<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin - Bootstrap Admin Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- switch css -->
    <link href="css/bootstrap-switch.css" rel="stylesheet">



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav">
            <li>
                <a class="navbar-brand" href="#"><img src="static/logo.png"></a>
            </li>
            <li class="active">
                <a href="index.html"><i class="fa fa-fw fa-dashboard"></i> 主页</a>
            </li>
            <li>
                <a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> 数据可视</a>
            </li>
            <li>
                <a href="tables.html"><i class="fa fa-fw fa-table"></i> 招聘/简历</a>
            </li>
            <li>
                <a href="forms.html"><i class="fa fa-fw fa-edit"></i> 餐饮行业</a>
            </li>
            <li>
                <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> 企业 <i class="fa fa-fw fa-caret-down"></i></a>
                <ul id="demo" class="collapse">
                    <li>
                        <a href="#">时间轴</a>
                    </li>
                    <li>
                        <a href="#">风险预测</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a>
            </li>
            <li>
                <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
            </li>
            <li>
                <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
            </li>
            <li>
                <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->


    <!-- wrapper main container -->
    <div id="wrapper">
        <!-- nav row -->
        <div class="row">
            <nav class="navbar navbar-default">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登陆</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的系统 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Action</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Exit</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- nav row end-->

        <!-- page title -->
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">
                    杭州誉存科技有限公司
                    <p class="content"><small>——公司事件监控</small></p>
                </h2>
            </div>
        </div>
        <!-- page title end -->

        <!-- summary chart -->
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-gavel fa-5x"></i>
                            </div>
                            <div class="col-xs-9 message-count">
                                    <p>一个月内消息数量：<strong>3</strong></p>
                                    <p>今日更新消息数量：<strong>1</strong></p>
                                <div class="huge text-right">法务</div>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer">
                            <span class="pull-left">详细信息</span>
                            <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                            <div class="clearfix"></div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-green">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-university fa-5x"></i>
                            </div>
                            <div class="col-xs-9 message-count">
                                <p>一个月内消息数量：<strong>2</strong></p>
                                <p>今日更新消息数量：<strong>0</strong></p>
                                <div class="huge text-right">工商</div>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer">
                            <span class="pull-left">详细信息</span>
                            <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                            <div class="clearfix"></div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-yellow">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-paper-plane fa-5x"></i>
                            </div>
                            <div class="col-xs-9 message-count">
                                <p>一个月内消息数量：<strong>23</strong></p>
                                <p>今日更新消息数量：<strong>2</strong></p>
                                <div class="huge text-right">新闻</div>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer">
                            <span class="pull-left">详细信息</span>
                            <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                            <div class="clearfix"></div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-users fa-5x"></i>
                            </div>
                            <div class="col-xs-9 message-count">
                                <p>一个月内消息数量：<strong>14</strong></p>
                                <p>今日更新消息数量：<strong>0</strong></p>
                                <div class="huge text-right">人员</div>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer">
                            <span class="pull-left">详细信息</span>
                            <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                            <div class="clearfix"></div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!--summary end -->

        <!-- connection company table -->
        <div class="row">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">关联公司列表</div>
                <!--<div class="panel-body">-->
                    <!--<p>...</p>-->
                <!--</div>-->
                <!--<div class="connection-list">-->
                    <!--<ul class="list-group ">-->
                        <!--<li class="list-group-item">-->
                            <!--<div class="status status-working">-->
                            <!--</div>-->
                            <!--<a>重庆誉存信用股份有限公司</a>-->
                            <!--<a>投资关系</a>-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->

                <!-- table  connection company begin -->
                <table class="table">
                    <thead>
                        <tr>
                            <th>状态</th>
                            <th>公司名称</th>
                            <th>关联关系</th>
                            <th>创建时间</th>
                            <th>监控开关</th>
                            <th>设置</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><div class="status status-working"></div></td>
                            <td>重庆誉存信用管理有限公司</td>
                            <td>投资关系</td>
                            <td>2016-09-01</td>
                            <td>
                                <div class="switch switch-mini">
                                    <input type="checkbox" name="switch" checked />
                                </div>
                            </td>
                            <td>
                                <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
                            </td>
                        </tr>
                        <tr>
                            <td><div class="status status-working"></div></td>
                            <td>重庆测试数据1有限公司</td>
                            <td>人员关系</td>
                            <td>2016-09-02</td>
                            <td>
                                <div class="switch switch-mini">
                                    <input type="checkbox" name="switch" checked />
                                </div>
                            </td>
                            <td>
                                <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
                            </td>
                        </tr>
                        <tr>
                            <td><div class="status status-working"></div></td>
                            <td>重庆测试数据1测试数据2股份有限公司</td>
                            <td>人员关系</td>
                            <td>2016-09-03</td>
                            <td>
                                <div class="switch switch-mini">
                                    <input type="checkbox" name="switch" checked />
                                </div>
                            </td>
                            <td>
                                <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- table connection company end -->
            </div>
        </div>
        <!-- connection company table row end -->

        <!-- event desc row -->
        <div class="row">
            <!-- time line desc part -->
            <div class="col-lg-4">
                <div class="event-box">
                    <!--<div class="box-title">-->
                        <!--<h4></h4>-->
                        <!--<div class="box-tool">-->
                            <!--<a class="collapse-link"><i class="fa fa-chevron-down "></i></a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="box-content box-heading">
                        <h4>企业事件时间轴</h4>
                        <div class="box-tool">
                            <a href="javascript:;" data-toggle="collapse" data-target="#timeline" class="collapse-link"><i class="fa fa-chevron-down "></i></a>
                        </div>
                        <!--<p><small>杭州誉存科技有限公司</small></p>-->
                    </div>

                    <div class="box-content inspinia-timeline" id="time-line">
                        <div class="timeline-item">
                            <div class="row">
                                <div class="col-xs-3 date">
                                    <i class="fa fa-briefcase"></i>
                                    2016-09-08
                                    <br/>
                                    <small class="timeline-small">Today</small>
                                </div>
                                <div class="col-xs-9 content content-top">
                                    <p class="timeline-content-head"><strong>工商变更</strong></p>
                                    <p>企业信息:地址</p>
                                    <p>变更前内容:重庆市万州区王牌路31号附1号房1、2号</p>
                                    <p>变更后内容:重庆市万州区太白路136号18-B2</p>
                                </div>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="row">
                                <div class="col-xs-3 date">
                                    <i class="fa fa-briefcase"></i>
                                    2016-09-08
                                    <br/>
                                    <small class="timeline-small">Today</small>
                                </div>
                                <div class="col-xs-9 content">
                                    <p class="timeline-content-head"><strong>工商变更</strong></p>
                                    <p>企业信息:地址</p>
                                    <p>变更前内容:重庆市万州区王牌路31号附1号房1、2号</p>
                                    <p>变更后内容:重庆市万州区太白路136号18-B2</p>
                                </div>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="row">
                                <div class="col-xs-3 date">
                                    <i class="fa fa-briefcase"></i>
                                    2016-09-06
                                    <br/>
                                    <small class="timeline-small">Two days ago</small>
                                </div>
                                <div class="col-xs-9 content">
                                    <p class="timeline-content-head"><strong>新闻</strong></p>
                                    <p>链接:http://echarts.baidu.com/echarts2/doc/example.html</p>
                                    <p>新闻标签:人员变动</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- time line desc part end -->
            <!-- time line chart -->
            <div class="col-lg-8">
                <div class="col-lg-8 chart-container" id="chart1">

                </div>
            </div>
            <!-- time line chart end -->
        </div>
        <!-- event desc row end -->
    </div>
    <!-- end wrapper -->

    <!-- js part-->
    <!-- *******************************************-->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Bootstrap switch-->
    <script src="js/bootstrap-switch.js"></script>

    <!-- Chart javascript :eChart -->
    <script src="js/echarts.min.js"></script>
    <!-- script for collapse action-->
    <script type="text/javascript">
        $("[name='switch']").bootstrapSwitch();

        // Collapse ibox function
        $('.collapse-link').on('click', function () {
            var box = $(this).closest('div.event-box');
            var button = $(this).find('i');
            var content = box.find('div.inspinia-timeline');
            content.slideToggle(200);
            button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
            box.toggleClass('').toggleClass('border-bottom');
            setTimeout(function () {
//                box.resize();
                box.find('.inspinia-timeline').resize();
            }, 50);
        });
    </script>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('chart1'));
        //app.title = '2016年企业事件';

        var months = ['01', '02', '03', '04', '05', '06', '07',
            '08', '09', '10','11','12'];

        //trans month format for axis
        function months_trans(months){
            var new_months = []
            for(x in months){
                new_months.push('2016-' + months[x])
            }
            return new_months
        };

        var new_months = months_trans(months)
        var types = ['法务', '新闻', '工商',
            '失信', '执行', '招聘', '简历'];

        var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[1,0,7],[1,1,2],[1,2,1],[1,3,0],[1,4,0],[1,5,3],[1,6,4],[1,7,7],[1,8,0],[1,9,1],[1,10,5],[1,11,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0]];

        option = {
            tooltip: {
                position: 'top',
                trigger:'item',
                formatter:function(params){
                    //console.log(params) 查看参数类型
                    var result = '类型: '+ params.seriesName + '<br/>' + (params.data[0] + 1).toString() + '月: ' + params.data[1] + '条'
                    return result

                }
            },
            title:[],
            singleAxis: [],
            series: [],
        };

        echarts.util.each(types, function (type, idx) {
            option.title.push({
                textBaseline: 'middle',
                top: (idx + 0.5) * 100 / 7 + 10 + '%',
                left:30,
                text: type
            });
            option.title.push({
                text: '杭州誉存科技有限公司',
                subtext: '2016企业事件时间轴',
                x:'center'
            })
            option.singleAxis.push({
                left: 125,
                type: 'category',
                boundaryGap: false,
                data: new_months,
                top: (idx * 100 / 7 + 5) + 10 + '%',
                height: (100 / 7 - 10) + '%',
                axisLabel: {
                    interval: 1
                }
            });
            option.series.push({
                singleAxisIndex: idx,
                coordinateSystem: 'singleAxis',
                type: 'scatter',
                data: [],
                name: type,
                symbolSize: function (dataItem) {
                    return dataItem[1] * 4;
                }
            });
        });

        echarts.util.each(data, function (dataItem) {
            option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
        });
        myChart1.setOption(option);
    </script>

    <!-- Morris Charts JavaScript -->
    <script src="js/plugins/morris/raphael.min.js"></script>
    <script src="js/plugins/morris/morris.min.js"></script>
    <script src="js/plugins/morris/morris-data.js"></script>
    <!-- ********************************************-->

    
</body>
